<template>
  <div>
    <h2>list</h2>
    <div v-for="(item, index) in plist" :key="index" @click="goDetail(item.id)">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      plist: [
        { name: "产品1", id: "1" },
        { name: "产品2", id: "2" },
        { name: "产品3", id: "3" },
      ],
    };
  },
  methods: {
    goDetail(id) {
      console.log(id);
      //去到产品详情页
      //push
      // this.$router.push('/pdetail')

      //方式1 字符串拼接
      //注意 如果你要路由传递参数 传递的参数 比较少的参数 =>
      //  this.$router.push(`/pdetail?id=${id}&ids=100`)
      //方式2
      // this.$router.push({path:'/pdetail',query:{
      //     id:id,
      //     num:100,
      //     msg:'你好'
      // }})

      //这个两种方式=》我们的才是都是可以在路由地址上看到的

      //  params
      //   this.$router.push({
      //     name: "Pdetail",//注意
      //     params: {
      //       id: id,
      //       num: 100,
      //       msg: "你好",
      //     },
      //   });

      // replace

      //  this.$router.replace(`/pdetail?id=${id}&ids=100`)

      this.$router.replace({
        path: "/pdetail",
        query: {
          id,
        },
      });
    },
  },
};
</script>

<style>
</style>